<template>
    <div>
        <ElButton>刷新</ElButton> <el-text size='small'>总金额：{{ totalAmount }}, 总成本：{{ totalCost }}, 持仓收益：{{ totalEarn}}</el-text>
        <el-skeleton :rows="5" animated :loading="loading">
            <ElTable :data="tableData" border style="width: 100%">
                <ElTableColumn prop="product_id" label="product_id" width="180" />
                <ElTableColumn prop="账户名称" label="账户名称" width="180" />
                <ElTableColumn prop="product_name" label="product_name" width="180" />
                <ElTableColumn prop="product_type" label="product_type" />
                <ElTableColumn prop="unit_net_value" label="unit_net_value" />
                <ElTableColumn prop="市值" label="市值" />
                <ElTableColumn prop="当日收益" label="当日收益" />
                <ElTableColumn prop="成本" label="成本" />
                <ElTableColumn prop="持仓数" label="持仓数" />
                <ElTableColumn prop="最后更新日" label="最后更新日">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <el-icon>
                                <timer />
                            </el-icon>
                            <span style="margin-left: 10px">{{ new Date(scope.row.最后更新日).toLocaleDateString() }}</span>
                        </div>
                    </template>
                </ElTableColumn>
            </ElTable>
        </el-skeleton>
        <div v-if="false">
            持仓<br />
            {{ userInfo }} <br /><br /><br /><br /><br />
            {{ permissions }}
            {{ dbgmsg }}
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import useUserStore from '@/store/modules/user'
import { getNowFund } from '@/app/finace/api/index'
const userStore = useUserStore()
const userInfo = ref({})
const permissions = ref([])
const dbgmsg = ref('')
const loading = ref(true)
const totalAmount = ref(0)
const totalCost = ref(0)
const totalEarn = computed(() => Math.round(totalAmount.value - totalCost.value).toFixed(2))
const tableData = ref([
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
])

onMounted(() => {
    loading.value = false
    userStore.getInfo().then((res) => {
        console.log({ res })
        userInfo.value = res.user
        permissions.value = res.permissions
        getNowFund(userInfo.value.userId).then((res) => {
            console.log(res)
            tableData.value = res.data
            dbgmsg.value = res.data
            totalAmount.value= res.data.reduce((acc, cur) => {acc += cur.市值; return acc}, 0)
            totalCost.value = res.data.reduce((acc, cur) => {acc += cur.成本; return acc}, 0)
            loading.value = false
        })
    })
})


</script>